<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  export default {
    name: 'editorElem',
    data() {
      return {
        editorContent: ''
      }
    },
    props: {
      catchData: {},
      dataCon: {
        type: String,
        default: ''
      },
      flag: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      this.dom()
    },
    methods: {
      dom() {
        const editor = new E(this.$refs.editorElem)
        editor.customConfig.onchange = (html) => {
          this.editorContent = html
          this.catchData(html)
        }
        editor.customConfig.menus = [
          'head',
          'list',
          'justify',
          'bold',
          'fontSize',
          'italic',
          'underline',
          'image',
          'foreColor',
          'undo',
          'redo'
        ]
        editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, file) {
          },
          success: function (xhr, editor, result) {
            this.imgUrl = Object.values(result.data).toString()
          },
          fail: function (xhr, editor, result) {
          },
          error: function (xhr, editor) {
          },
          timeout: function (xhr, editor) {
          },
          customInsert: function (insertImg, result, editor) {
            let url = Object.values(result.data)
            JSON.stringify(url)
            insertImg(url)
          }
        }
        editor.create()
        editor.txt.clear()
        editor.txt.append(this.dataCon)
      }
    },
    watch: {
      flag() {
        this.dom()
      }
    }
  }
</script>
